﻿@using SmartAnalytics.Report.Areas.Flow.Models
@model List<SmartAnalytics.Services.Models.RegionListByDayPageItem>

@{
    ViewBag.Title = "地域分布";
}

<input type="hidden" id="date" name="date" value="@ViewBag.Date" />
<input type="hidden" id="domain" value="@ViewBag.SiteDomain" />

<div class="row">

    @Html.Partial("_PartialMenu")

    <div class="col-md-9 ">

        <ol class="breadcrumb">
            <li><a href="/">SmartAnalytics</a></li>
            <li><a href="/Visitor">访客分析</a></li>
            <li class="active">地域分布</li>
        </ol>

        <!--网站域名-->
        @Html.Partial("_PartialSiteDomain", ViewBag.AllDomain as List<SmartAnalytics.Entities.Domain>)

        <div class="callout callout-primary">
            <div class="btn-group" id="tool-list">
                <a class="btn btn-default btn-group-lg" data-date="@DateTime.Now.ToString("yyyy-MM-dd")"
                   href="/Visitor/Region?date=@DateTime.Now.ToString("yyyy-MM-dd")&domain=@ViewBag.SiteDomain">今日</a>

                <a class="btn btn-default btn-group-lg" data-date="@DateTime.Now.AddDays(-1).ToString("yyyy-MM-dd")"
                   href="/Visitor/Region?date=@DateTime.Now.AddDays(-1).ToString("yyyy-MM-dd")&domain=@ViewBag.SiteDomain">昨日</a>

                <a class="btn btn-default btn-group-lg" data-date="@DateTime.Now.AddDays(-2).ToString("yyyy-MM-dd")"
                   href="/Visitor/Region?date=@DateTime.Now.AddDays(-2).ToString("yyyy-MM-dd")&domain=@ViewBag.SiteDomain">前天</a>
            </div>
        </div>

        <!--概况栏-->
        @Html.Partial("_PartialPrimaryIndicators", @ViewBag.PrimaryIndicators as PrimaryIndicators)

        <!--图表栏-->
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">统计图表(@ViewBag.Date)</h3>
            </div>
            <div class="panel-body">
                <!--地图-->
                <div id="map-Left" style="height: 500px; border-bottom: 1px solid #ddd;"></div>
                <!--饼图-->
                <div id="map-Right" style="height: 500px;"></div>
            </div>
        </div>

        <!--表格栏-->
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">统计报表(@ViewBag.Date)</h3>
            </div>

            <table class="table table-hover table-striped table-condensed table-bordered center">
                <thead>
                    <tr>
                        <th class="center">序号</th>
                        <th class="center">省份</th>
                        <th class="center">PV</th>
                        <th class="center">UV</th>
                        <th class="center">IP</th>
                        <th class="center">新访客</th>
                        <th class="center">新访客比率</th>
                    </tr>
                </thead>
                <tbody>

                    @for (var i = 0; i < Model.Count; i++)
                    {
                        <tr>
                            <td>@(i + 1)</td>
                            <td>@Model[i].Region</td>
                            <td>@Model[i].PageView</td>
                            <td>@Model[i].UniqueUser</td>
                            <td>@Model[i].UniqueIp</td>
                            <td>@Model[i].NewUniqueUser</td>
                            <td>@(Model[i].NewUniqueUserRate*100)%</td>
                        </tr>
                    }

                </tbody>
            </table>

        </div>

        @if (Model.Count == 0)
        {
            <div class="alert alert-info" role="alert">
                说明：未查询到数据。
            </div>
        }

    </div>
</div>



<script type="text/javascript">

    require.config({
        paths: {
            echarts: '/Scripts/ECharts'
        }
    });
    //渲染ECharts
    function RenderECharts(chartsArea, chartOption) {
        require([
        'echarts',
        'echarts/chart/map',
        'echarts/chart/pie'
        ], function (ec) {
            var myChart = ec.init(document.getElementById(chartsArea));
            myChart.setOption(chartOption);
        });
    }

    $(function () {

        $('[data-toggle="popover"]').popover({ animation: true, trigger: 'hover' });

        //获取系统常量
        var domain = $('#domain').attr('value');
        var date = $('#date').attr('value');


        //访客分析-地区分布-地图
        TongJiApi.OriginCategoryHour(date, domain, '', function (data) {

            //地图
            var option = getOptionLeft(date, domain, data);

            RenderECharts('map-Left', option);

        });

        //访客分析-地区分布-饼图
        TongJiApi.OriginCategoryDay(date, domain, '', function (data) {

            //饼图
            var option = getOptionRight(date, domain, data);

            RenderECharts('map-Right', option);

        });

    });

    function getOptionLeft(day, domain, data) {
        //地图
        var option = {
            title: {
                x: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                x: 'left',
                data: ['独立访客IP']
            },
            dataRange: {
                min: 0,
                max: @( Model.Count ==0? 0: Model.Max(p=>p.UniqueIp)),
                x: 'left',
                y: 'bottom',
                text: ['高', '低'],
                calculable: true
            },
            roamController: {
                show: true,
                x: 'right',
                mapTypeControl: {
                    'china': true
                }
            },
            series: [
                {
                    name: '独立访客IP',
                    type: 'map',
                    mapType: 'china',
                    itemStyle: {
                        normal: { label: { show: true } },
                        emphasis: { label: { show: true } }
                    },
                    data: [

                        @for(var i = 0; i < Model.Count; i++) {
                            <text>{ name: '@Model[i].Region.Replace("省","").Replace("市", "")', value: @Model[i].UniqueIp },</text>
                        }

                    ]
                }
            ]
        };

        return option;
    }

    function getOptionRight(day, domain, data) {

        //饼图
        var option = {
            tooltip: {
                trigger: 'item',
                formatter: "{b} : {c}<br/>总量占比：{d}%"
            },
            legend: {
                orient: 'vertical',
                x: 'left',
                data: [
                    @for (var i = 0; i < Model.Count; i++)
                    {
                        <text>'@Model[i].Region',</text>
                    }
                ]
            },
            calculable: true,
            series: [
                {
                    type: 'pie',
                    data: [

                        @for(var i = 0; i < Model.Count; i++) {
                            <text>{ name: '@Model[i].Region', value: @Model[i].UniqueIp },</text>
                        }

                    ]
                }
            ]
        };


        return option;
    }

</script>
